<template>
  <div>
    <!-- 玫瑰饼状图 -->
    <div id="subject" class="subject"></div>
  </div>
</template>
<script>
import * as echarts from 'echarts'
export default {
  data() {
    return {}
  },
  mounted() {
    var chartDom = document.getElementById('subject')
    var myChart = echarts.init(chartDom)
    var option
    option = {
      tooltip: { show: true },
      toolbox: {
        show: true
      },
      series: [
        {
          name: 'Nightingale Chart',
          type: 'pie', // 玫瑰饼图
          radius: [15, 60],
          center: ['50%', '50%'],
          roseType: 'area',

          data: [
            { value: 100, name: '前端' },
            { value: 80, name: 'java' },
            { value: 60, name: '大数据' },
            { value: 40, name: 'C++' },
            { value: 20, name: 'UI' }
          ]
        }
      ]
    }
    option && myChart.setOption(option)
  },
  methods: {}
}
</script>
<style scoped>
.subject {
  width: 220px;
  height: 220px;
}
</style>
